<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="{{ asset('js/jquery-1.8.3.min.js') }}" type="text/javascript"></script>
<link rel="stylesheet" href="{{URL::asset('./css/findpass.css')}}">
<meta name="_token" content="{{csrf_token()}}">
<link rel="stylesheet" href="{{URL::asset('./css/reset.css')}}">
<!-- <a><img src="{{URL::asset('./img/index/floor_tel.png')}}" alt=""><span> -->
<div class="loginBg" id="login">
    <div class="loginForm">
        <div class="loginMain">
            <div class="login_title">
                <img :src="overall.site_logo">
            </div>
            <div class="login_nav">
                <div class='active'>找回密码</div>
            </div>
            <el-form :model="form" label-position="top" size="mini" ref="form">
                <el-form-item prop="tel" label="手机号" :rules="telRule">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="password" :rules="passRule">
                    <el-input v-model="form.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="verifyPass" :rules="verifyPassRule">
                    <el-input v-model="form.verifyPass" show-password></el-input>
                </el-form-item>

                <el-form-item label="验证码" prop="code" :rules="codeRule">
                    <el-input v-model="form.code">
                        <span slot="suffix" @click="getCode" class="suffixCon">获取验证码<a v-if="codeBo">(@{{codeTime}}s)</a></span>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button class="submit" :loading="submitBo" @click="submitForm('form')">
                确认找回
            </el-button>
        </div>
    </div>
</div>

<script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/element.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/public.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>

<script>
    $(() => {
        let app = new Vue({
            el: '#login',
            data() {
                var validateTel = (rule, value, callback) => {
                    var reg = /^((13|14|15|16|17|18|19)[0-9]\d{8})$/;
                    if (value == '') {
                        callback(new Error('请输入联系电话'));
                    } else if (!reg.test(value)) {
                        callback(new Error('请输入正确的联系电话!'));
                    } else {
                        callback();
                    }
                };
                var validatePass2 = (rule, value, callback) => {
                    if (value == '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value != this.form.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                return {
                    overall: "",
                    activeBo: 1,
                    form: {
                        tel: "",
                        password: '',
                        verifyPass: '',
                        code: ''
                    },
                    telRule: [{
                        required: true,
                        validator: validateTel,
                        trigger: 'blur'
                    }],
                    passRule: [{
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    }],
                    verifyPassRule: [{
                        required: true,
                        validator: validatePass2,
                        trigger: 'blur'
                    }],

                    codeRule: [{
                        required: true,
                        message: '验证码不能为空',
                        trigger: 'blur'
                    }],
                    remenberBo: false,
                    codeTime: 60,
                    submitBo: false,
                    codeBo: false,
                }
            },
            created() {
                window.$message = (res) => {
                    this.$message({
                        message: res,
                        type: 'error'
                    });
                };

            },
            methods: {
                getCode() {
                    if (this.codeTime == 60) {
                        $.get("{{ route('home.public.config') }}", (res) => {
                            this.codeBo = true
                            let a = setInterval(() => {
                                this.codeTime -= 1;
                                if (this.codeTime == 0) {
                                    this.codeBo = false;
                                    this.codeTime = 60;
                                    clearInterval(a)
                                }
                            }, 1000);
                        });
                    }
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.submitBo = true;
                            let data = {
                                mobile: this.form.tel,
                                password: this.form.password,
                                confirmc_pass: this.form.verifyPass,
                            }
                            apiAjax("{{ route('home.login.findPass') }}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    this.$message({
                                        message: '找回成功',
                                        type: 'success'
                                    });
                                    window.location.href = "{{ route('home.login.login') }}";
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });
                                }
                                this.submitBo = false;
                            }, (erro) => {
                                this.submitBo = false;
                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
            }

        })
    })
</script>